<template>
  <!-- 卡片 -->
  <el-card>
    <!-- 卡片化标签页 -->
    <el-tabs>
      <!--第一页-->
      <el-tab-pane label="药品销售列表">
        <!-- 查询表单 -->
        <el-form ref="queryParams" :model="queryParams" :inline="true" label-width="68px">
          <!-- 用户姓名 -->
          <el-form-item label="药品名称" prop="itemName">
            <el-input v-model="queryParams.itemName"></el-input>
          </el-form-item>
          <!-- 交易时间 -->
          <el-form-item label="交易时间" prop="dateRange">
            <el-date-picker
                v-model="queryParams.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <!-- 搜索和重置按钮 -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="selectionChange"
        >
          <!-- 药品ID 列 -->
          <el-table-column
              prop="itemRefId"
              label="药品ID"
              align="center">
          </el-table-column>
          <!-- 药品名称 列 -->
          <el-table-column
              prop="itemName"
              label="药品名称"
              align="center">
          </el-table-column>
          <!-- 销售价格 列 -->
          <el-table-column
              prop="price"
              label="销售价格"
              align="center">
          </el-table-column>
          <!-- 交易数量 列 -->
          <el-table-column
              prop="num"
              label="交易数量"
              align="center">
          </el-table-column>
          <!-- 交易总价 列 -->
          <el-table-column
              prop="amount"
              label="交易总价"
              align="center">
          </el-table-column>
          <!-- 创建时间 列 -->
          <el-table-column
              prop="createTime"
              label="创建时间"
              align="center">
          </el-table-column>
        </el-table>
        <!-- 分页控件 -->
        <el-pagination
            :current="queryParams.pageNum"
            :page-sizes="[5, 10, 20, 30]"
            :pageSize="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryParams.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->
      </el-tab-pane>
      <!--第二页-->
      <el-tab-pane label="药品销售统计列表">
        <!-- 查询表单 -->
        <el-form ref="TwoqueryParams" :model="TwoqueryParams" :inline="true" label-width="68px">
          <!-- 药品名称 -->
          <el-form-item label="药品名称" prop="itemName">
            <el-input v-model="TwoqueryParams.itemName"></el-input>
          </el-form-item>
          <!-- 交易时间 -->
          <el-form-item label="交易时间" prop="dateRange">
            <el-date-picker
                v-model="TwoqueryParams.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <!-- 搜索和重置按钮 -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryTwo">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQueryTwo">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <el-table
            :data="twoTable"
            border
            show-summary
            style="width: 100%"
            @selection-change="twoChange">
          <!-- 药品ID 列 -->
          <el-table-column
              prop="itemRefId"
              label="药品ID"
              align="center"
              width="180">
          </el-table-column>
          <!-- 药品名称 列 -->
          <el-table-column
              prop="itemName"
              align="center"
              label="药品名称">
          </el-table-column>
          <!-- 销售次数 列 -->
          <el-table-column
              prop="price"
              align="center"
              sortable
              label="销售次数">
          </el-table-column>
          <!-- 销售数量 列 -->
          <el-table-column
              prop="num"
              align="center"
              sortable
              label="销售数量">
          </el-table-column>
          <!-- 总金额 列 -->
          <el-table-column
              prop="amount"
              align="center"
              sortable
              label="总金额">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      twoTable: [],
      // 查询参数
      TwoqueryParams: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  created() {
    this.loadSales(); // 初始化加载药品销售数据
    this.loadNum(); // 初始化加载药品销售统计数据
  },
  methods: {
    // 处理第二个表格的选中行
    twoChange(val) {
      this.selectedRows = val;
    },
    // 处理第一个表格的选中行
    selectionChange(val) {
      this.selectedRows = val;
    },
    // 加载药品销售数据
    loadSales() {
      this.$http.post("/statistics/careOrderItem/listByPage", this.queryParams).then(resp => {
        this.tableData = resp.data.data.records;
        this.queryParams.total = resp.data.data.total;
      })
    },
    // 加载药品销售统计数据
    loadNum() {
      this.$http.post("/statistics/careOrderItem/listByString", this.TwoqueryParams).then(resp => {
        this.twoTable = resp.data.data;
        this.TwoqueryParams.total = resp.data.data.total;
      })
    },
    // 重置第一个表格查询条件
    resetQuery() {
      this.queryParams = {}
      this.loadSales();
    },
    // 执行第一个表格查询
    handleQuery() {
      this.loadSales();
    },
    // 重置第二个表格查询条件
    resetQueryTwo() {
      this.TwoqueryParams = {}
      this.loadNum();
    },
    // 执行第二个表格查询
    handleQueryTwo() {
      this.loadNum();
    },
    // 分页大小变化时触发
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.loadSales()
    },
    // 当前页变化时触发
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.loadSales()
    }
  }
}
</script>

<style>
</style>
